<template>
  <div class="Main">
    <div class="MainTitle">配置列表</div>
    <div class="MianContent">
      <div class="content">
        <el-button @click="refreshFn" size="small" type="primary"
          >刷新缓存</el-button
        >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in groupList"
            :key="index"
            :label="item.label"
            :name="item.key"
          >
            <div
              class="dataList"
              v-for="(item1, index1) in dataList"
              :key="index1"
            >
              <span
                >配置名称：{{ item1.title }} （ 配置KEY：{{
                  item1.name
                }}
                ）</span
              >
              <p style="margin-top: 10px; display: flex; align-items: center">
                <template v-if="item1.name != 'AGREEMENT_CONTENT'"
                  ><span style="flex-shrink:0;">配置值：</span></template
                >
                <!-- <template
                  v-if="item1.type == 0 && item1.name != 'AGREEMENT_CONTENT'"
                >
                  <el-input
                    v-model.number="item1.value"
                    type="tel"
                    @input="
                      item1.value = String(item1.value).replace(/[^\d]/g, '')
                    "
                  ></el-input>
                </template> -->
                <template v-if="item1.type == 0">
                  <el-input v-model="item1.value" type="number"></el-input>
                </template>
                <template v-if="item1.type == 1">
                  <el-input v-model="item1.value" type="text"></el-input>
                </template>
                <!-- <template v-if="item1.type == 2">
                  <el-input
                    style="width: 50%"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="item1.value"
                  >
                  </el-input>
                </template> -->
                
                <template v-if="item1.type == 2">
                  <div style="width: 100%; height: 364px;">
                    <editor-bar
                      v-model="item1.value"
                      :value="item1.value"
                      :isClear="false"
                    ></editor-bar>
                  </div>
                </template>
                <template v-if="item1.type == 3">
                  <el-checkbox-group v-model="item1.value">
                    <el-checkbox
                      v-for="(checkItem, checkIndex) in item1.extra"
                      :key="checkIndex"
                      :label="checkItem.key"
                      >{{ checkItem.value }}</el-checkbox
                    >
                  </el-checkbox-group>
                </template>
                <template v-if="item1.type == 4">
                  <el-radio-group v-model="item1.value">
                    <el-radio
                      v-for="(radioItem, radioIndex) in item1.extra"
                      :key="radioIndex"
                      :label="radioItem.key"
                      >{{ radioItem.value }}</el-radio
                    >
                  </el-radio-group>
                </template>
              </p>
            </div>
            <el-button
              v-if="dataList.length"
              @click="sysSubmitFn"
              size="small"
              type="primary"
              >提交</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import EditorBar from "@/components/common/wangEnduit/wangEnduit";
import {
  GetSystemConfig,
  SystemConfigSave,
  SystemConfigRefresh,
} from "@/api/api.js";

export default {
  components: {
    EditorBar,
  },
  data() {
    return {
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      groupList: [],
      dataList: [],
      activeName: "",
    };
  },
  mounted() {
    this.getSystem();
  },
  methods: {
    // 获取配置信息
    getSystem() {
      let params = {
        type: this.activeName == "0" ? "" : this.activeName,
      };
      GetSystemConfig(params).then((res) => {
        console.log(res, "配置信息");
        if (res.data.code == 1) {
          let data = res.data.data;
          let obj = data.group;
          let arr = [];
          for (let i in obj) {
            arr.push({
              key: i,
              label: obj[i],
            });
          }
          this.activeName = data.type.toString();
          data.list.map((item) => {
            if (item.type == 3 || item.type == 4) {
              let arr = [];
              item.extra = item.extra.split(",");
              item.extra.map((item1) => {
                item1 = item1.split(":");
                let obj = {
                  key: item1[0],
                  value: item1[1],
                };
                arr.push(obj);
              });
              item.extra = arr;
            }
            if (item.type == 3) {
              item.value = item.value.split(",");
            }
          });
          this.dataList = data.list;
          console.log(this.dataList, "配置信息列表");
          this.groupList = arr;
          console.log(this.groupList, "----");
        }
      });
    },

    // 刷新缓存
    refreshFn() {
      SystemConfigRefresh().then((res) => {
        console.log(res, "刷新缓存");
        if (res.data.code == 1) {
          showSuccess("刷新成功");
          this.getSystem();
        } else {
          showError(res.data.msg);
        }
      });
    },

    // 切换tabs
    handleClick(e) {
      this.getSystem();
    },

    // 提交按钮
    sysSubmitFn() {
      // let arr = []
      let obj = {};
      console.log(this.dataList, "====");
      this.dataList.map((item) => {
        if (item.type == 3) {
          item.value = item.value.join(",");
        }
        obj[item.name] = item.value;
      });
      let params = {
        config: JSON.stringify(obj),
      };
      SystemConfigSave(params).then((res) => {
        console.log(res, "====");
        if (res.data.code == 1) {
          showSuccess("提交成功");
          this.getSystem();
        } else {
          showError(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}

.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .MainTopActionOne {
          margin-right: 30px;

          span {
            margin-right: 20px;
          }
        }

        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }

      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}

.content {
  padding: 20px 20px;
  background-color: #fff;

  .el-button {
    margin-bottom: 20px;
  }

  .dataList {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;

    .el-input {
      width: 30%;
    }

    span {
      margin-bottom: 8px;
    }
  }
}

.MianContent .content .dataList span {
  margin: 0;
}
</style>